<template>
 
  <div class="container mx-auto max-w-screen-xl mt-5">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
        <div class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">分类</h2>
                    <div
                            class="text-base font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories" :key="index"
                                class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                                <svg class="w-4 h-4 mr-2 mb-2px text-gray-800 inline dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="0.9"
                                        d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                                </svg>
                                {{ item.name }}
                            </a>
                        </div>
                </div>
          
      </div>
  
      <!-- 右边栏 -->
      <div class="lg:col-span-1">
        <div class="sticky top-21">
          <!-- 用户信息卡片 -->
          <UserInfoCard></UserInfoCard>
        </div>
      </div>
    </div>
  </div>
  </template>
  
  
  <script setup >
  import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
  import { getArchives } from '@/service/api/frontend/archive'
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

const goCatagoryArticleListPage = (id, name) => {
    router.push({ path: '/client/category/category-article', query: { id: id, name: name } })
}

const categories = ref([])
getCategories().then((e) => {
   
        categories.value = e.data
    
})

  
  </script>
  
  
  <style scoped>
  .header-banner {
    min-height: 160px;
  }
  </style> 